<template>
  <d2-container>
    <div class="price_KD">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="礼品-淘宝/天猫" name="third">
          <el-table
            :data="tableData_TB" style="width: 100%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column
              prop="id"
              width="50"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="note"
              width="300"
              label="快递公司">
            </el-table-column>
            <el-table-column
              prop="vip_one_price"
              label="VIP-1">
              <template slot-scope="scope">
                {{scope.row.vip_one_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_two_price"
              label="VIP-2">
              <template slot-scope="scope">
                {{scope.row.vip_two_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_three_price"
              label="VIP-3">
              <template slot-scope="scope">
                {{(scope.row.vip_three_price+0.5).toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_four_price"
              label="VIP-4">
              <template slot-scope="scope">
                {{scope.row.vip_four_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_fives_price"
              label="VIP-5">
              <template slot-scope="scope">
                {{(scope.row.vip_fives_price+0.5).toFixed(2)}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="礼品-拼多多" name="second">
          <el-table
            :data="tableData_PDD" style="width: 100%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column
              prop="id"
              width="50"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="note"
              width="300"
              label="快递公司">
            </el-table-column>
            <el-table-column
              prop="vip_one_price"
              label="VIP-1">
              <template slot-scope="scope">
                {{scope.row.vip_one_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_two_price"
              label="VIP-2">
              <template slot-scope="scope">
                {{scope.row.vip_two_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_three_price"
              label="VIP-3">
              <template slot-scope="scope">
                {{(scope.row.vip_three_price+0.5).toFixed(2)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_four_price"
              label="VIP-4">
              <template slot-scope="scope">
                {{scope.row.vip_four_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_fives_price"
              label="VIP-5">
              <template slot-scope="scope">
                {{(scope.row.vip_fives_price+0.5).toFixed(2)}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="礼品-京东" name="first">
          <el-table
            :data="tableData_JD" style="width: 100%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column
              prop="id"
              width="50"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="note"
              width="300"
              label="快递公司">
            </el-table-column>
            <el-table-column
              prop="vip_one_price"
              label="VIP-1">
              <template slot-scope="scope">
                    {{scope.row.vip_one_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_two_price"
              label="VIP-2">
              <template slot-scope="scope">
                {{scope.row.vip_two_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_three_price"
              label="VIP-3">
              <template slot-scope="scope">
                {{scope.row.vip_three_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_four_price"
              label="VIP-4">
              <template slot-scope="scope">
                {{scope.row.vip_four_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_fives_price"
              label="VIP-5">
              <template slot-scope="scope">
                {{scope.row.vip_fives_price+0.5}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="信封-淘宝/天猫" name="fifth">
          <el-table
            :data="tableData_XFT" style="width: 100%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column
              prop="id"
              width="50"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="note"
              width="300"
              label="快递公司">
            </el-table-column>
            <el-table-column
              prop="vip_one_price"
              label="VIP-1">
              <template slot-scope="scope">
                {{scope.row.vip_one_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_two_price"
              label="VIP-2">
              <template slot-scope="scope">
                {{scope.row.vip_two_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_three_price"
              label="VIP-3">
              <template slot-scope="scope">
                {{scope.row.vip_three_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_four_price"
              label="VIP-4">
              <template slot-scope="scope">
                {{scope.row.vip_four_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_fives_price"
              label="VIP-5">
              <template slot-scope="scope">
                {{scope.row.vip_fives_price+0.5}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="信封-拼多多" name="fourth">
          <el-table
            :data="tableData_XFP" style="width: 100%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column
              prop="id"
              width="50"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="note"
              width="300"
              label="快递公司">
            </el-table-column>
            <el-table-column
              prop="vip_one_price"
              label="VIP-1">
              <template slot-scope="scope">
                {{scope.row.vip_one_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_two_price"
              label="VIP-2">
              <template slot-scope="scope">
                {{scope.row.vip_two_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_three_price"
              label="VIP-3">
              <template slot-scope="scope">
                {{scope.row.vip_three_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_four_price"
              label="VIP-4">
              <template slot-scope="scope">
                {{scope.row.vip_four_price+0.5}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vip_fives_price"
              label="VIP-5">
              <template slot-scope="scope">
                {{scope.row.vip_fives_price+0.5}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </d2-container>
</template>

<script>
  import {dt_price} from "@/api/api";
  export default {
    name: "index",
    data() {
      return {
        activeName: 'third',
        tableData_JD: [],
        tableData_PDD: [],
        tableData_TB: [],
        tableData_XFP:[],
        tableData_XFT:[]
      }
    },
    methods: {
      dt_prices() {
        dt_price().then(res => {
          this.tableData_JD = res.Data['京东']
          this.tableData_PDD = res.Data['拼多多']
          this.tableData_TB = res.Data['淘宝天猫']
          this.tableData_XFP = res.MoneyS['拼多多']
          this.tableData_XFT = res.MoneyS['淘宝天猫']
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 1) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      }
    },
    created() {
      this.dt_prices()
    }
  }
</script>

<style lang="scss">
  .price_KD{
    width:100%;
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  }
</style>
